<template>
  <div class="merchant-view">
    <v-title :title="title" />
    <loading :show="loading" />
    <div class="btn" @click="showQrcode = !showQrcode">{{ showQrcode ? '-收起收款码' : '+查看收款码' }}</div>
    <div class="qrcode" v-if="showQrcode">
      <div class="image">
        <img v-lazy="info.qrcodeReal" v-if="info.qrcodeReal" />
      </div>
    </div>
    <ul class="image-list">
      <li
        v-for="(item, index) in info.data.images"
        :key="index"
      >
        <div class="image">
          <img v-lazy="item.image.thumbnail_path" v-if="item.image && item.image.thumbnail_path" />
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import Title from '@/components/Title'
import Loading from '@/components/Loading'
import api from '@/api'
import base64 from '@/util/base64'
export default {
  name: 'MerchantView',
  components: {
    'v-title': Title,
    Loading
  },
  data() {
    return {
      loading: false,
      title: '门店',
      info: {
        data: {
          image: [],
        },
        qrcode: '',
        qrcodeReal: ''
      },
      showQrcode: false
    }
  },
  methods: {
    fetchData() {
      this.loading = true
      const id = this.$route.params.id
      api.Merchant.view({ id }).then(response => {
        let { data } = response
        data = base64.parse(data)
        this.info = Object.assign({}, { ...data })
        this.title = this.info.data.name
        this.info.qrcode = data.qrcode
        this.info.qrcodeReal = data.qrcode_real
      }).finally(() => {
        this.loading = false
      })
    }
  },
  created () {
    this.fetchData()
  },
  activated () {
    // this.fetchData()
  },
  deactivated () {
  }
}
</script>

<style scoped lang="stylus">
.merchant-view
  padding-top 45px
  padding-bottom 25px
  .image-list, .qrcode, .btn
    margin 10px
    background white
    padding 10px
  .btn
    color $main_color
    font-size 16px
    font-weight 700
    padding 20px
  .qrcode
    min-height 100px
</style>
